import 'package:cat_eye/bean/home_body_bean.dart';
import 'package:cat_eye/config/color_config.dart';
import 'package:cat_eye/config/string_config.dart';
import 'package:cat_eye/config/url_config.dart';
import 'package:cat_eye/provider/provider_widget.dart';
import 'package:cat_eye/root_page/home_page/video/video_item_widget.dart';
import 'package:cat_eye/root_page/home_page/video/video_play_widget.dart';
import 'package:cat_eye/util/date_util.dart';
import 'package:cat_eye/util/loading_state_widget_util.dart';
import 'package:cat_eye/util/util.dart';
import 'package:cat_eye/view_model/home_view_model/video_details_view_model.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

/*
* @Package: root_page.home_page
* @ClassName: video_details_widget
* @Author: szj
* @CreateDate: 7/31/21 1:19 PM
*/
//详情页面
class VideoDetailsWidget extends StatefulWidget {
  final Data data;

  const VideoDetailsWidget({Key key, @required this.data}) : super(key: key);

  @override
  _VideoDetailsWidgetState createState() => _VideoDetailsWidgetState();
}

class _VideoDetailsWidgetState extends State<VideoDetailsWidget> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ProviderWidget<VideoDetailsViewModel>(
        model: VideoDetailsViewModel(),
        onModelInit: (model) => model.loadVideoData(widget.data.id),
        builder: (context, model, child) {
          return LoadingWidget(
            type: model.type,
            child: Container(
              //设置背景
              decoration: _decoration(),
              child: Column(
                children: [
                  // AnnotatedRegion(
                  //   // 设置状态栏的背景色为黑色
                  //   value: SystemUiOverlayStyle.light,
                  //   child: Container(
                  //     //获取顶部状态栏的的高度
                  //     height: MediaQuery.of(context).padding.top,
                  //     color: Colors.black,
                  //   ),
                  // ),

                  //head 视频详情
                  VideoPlayWidget(
                    url: widget.data.playUrl,
                  ),

                  //视频以外的其他数据
                  _otherData(context, model),
                ],
              ),
            ),
          );
        },
      ),
    );
  }

  //其他数据
  Widget _otherData(context, model) {
    return Expanded(
        flex: 1,
        // 可滑动控件
        child: CustomScrollView(
          slivers: [
            //其他数据 - 文字
            _otherText(context),

            //其他数据 底部列表
            _otherList(model),
          ],
        ));
  }

  /// 推荐其他视频
  Widget _otherList(VideoDetailsViewModel model) {
    return SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) {
          if (model.itemList[index].type == StringConfig.VIDEO_SMALL_CARD) {
            return VideoItemWidget(
              data: model.itemList[index].data,
              callBack: () {
                //退出当前页面
                Navigator.pop(context);

                //打开新的视频页面
                Navigator.push(
                    context,
                    router(
                        widget: VideoDetailsWidget(
                            data: model.itemList[index].data)));
              },
            );
          }
          // 推荐的视频属于那个类型
          return Padding(
            padding: EdgeInsets.all(10),
            child: Text(
              model.itemList[index].data.text,
              style: TextStyle(
                  color: Colors.white,
                  fontWeight: FontWeight.bold,
                  fontSize: 16),
            ),
          );
        },
        childCount: model.itemList.length,
      ),
    );
  }

  /// 视频作者等介绍
  Widget _videoAuthor(BuildContext context) {
    return Row(
      children: <Widget>[
        Padding(
          padding: EdgeInsets.all(10),
          child: ClipOval(
            child: cacheImage(widget.data.author.icon, height: 40, width: 40),
          ),
        ),
        Expanded(
          flex: 1,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text(widget.data.author.name,
                  style: TextStyle(fontSize: 15, color: Colors.white)),
              Padding(
                padding: EdgeInsets.only(top: 3),
                child: Text(
                  widget.data.author.description,
                  style: TextStyle(fontSize: 13, color: Colors.white),
                ),
              )
            ],
          ),
        ),
        Padding(
          padding: EdgeInsets.only(right: 10),
          child: InkWell(
            onTap: () => buildFunction(context),
            child: Container(
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(5),
              ),
              padding: EdgeInsets.all(5),
              child: Text(
                StringConfig.FOLLOW,
                style: TextStyle(
                    fontWeight: FontWeight.bold,
                    color: Colors.grey,
                    fontSize: 12),
              ),
            ),
          ),
        ),
      ],
    );
  }

  /// 视频分类及上架时间
  Widget _videoTime() {
    return Padding(
      padding: EdgeInsets.only(left: 10, top: 10),
      child: Text(
        '#${widget.data.category} / ${formatDateMsByYMDHM(widget.data.author.latestReleaseTime)}',
        style: TextStyle(color: Colors.white, fontSize: 12),
      ),
    );
  }

  Widget _otherText(BuildContext context) {
    //SliverToBoxAdapter 必须配合 CustomScrollView 使用
    return SliverToBoxAdapter(
      child: Column(
        //从开始位置(最左侧)布局
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          //标题
          _videoTitle(),
          //时间
          _videoTime(),
          //视频描述
          _videoDescription(),
          //点赞转发评论
          _videoState(context),

          Padding(
              padding: EdgeInsets.only(top: 10, bottom: 10),
              child: Divider(height: 0.5, color: ColorConfig.white)),
          // 视频作者等介绍
          _videoAuthor(context),

          Padding(
              padding: EdgeInsets.only(top: 10, bottom: 10),
              child: Divider(height: 0.5, color: ColorConfig.white)),
        ],
      ),
    );
  }

  /// 视频的状态：点赞，转发，评论
  Widget _videoState(BuildContext context) {
    return Padding(
      padding: EdgeInsets.only(left: 10, top: 10),
      // 水平 LinearLayout
      child: Row(
        children: <Widget>[
          _row(context, 'images/ic_like.png',
              '${widget.data.consumption.collectionCount}'),
          Padding(
            padding: EdgeInsets.only(left: 30),
            child: _row(context, 'images/ic_share_white.png',
                '${widget.data.consumption.shareCount}'),
          ),
          Padding(
            padding: EdgeInsets.only(left: 30),
            child: _row(context, 'images/icon_comment.png',
                '${widget.data.consumption.replyCount}'),
          ),
        ],
      ),
    );
  }

  Widget _row(BuildContext context, String image, String text) {
    return InkWell(
      onTap: () => buildFunction(context),
      child: Row(
        children: <Widget>[
          Image.asset(
            image,
            height: 22,
            width: 22,
          ),
          Padding(
            padding: EdgeInsets.only(left: 3),
            child: Text(
              text,
              style: TextStyle(color: Colors.white, fontSize: 13),
            ),
          ),
        ],
      ),
    );
  }

  //暂无数据
  buildFunction(BuildContext context) {
    snackBar(context, StringConfig.NO_FUNCTION);
  }

  /// 视频描述
  Widget _videoDescription() {
    return Padding(
      padding: EdgeInsets.only(left: 10, top: 10, right: 10),
      child: Text(
        widget.data.description,
        style: TextStyle(color: Colors.white, fontSize: 14),
      ),
    );
  }

  /// 视频标题
  Widget _videoTitle() {
    return Padding(
      padding: EdgeInsets.only(left: 10, top: 10),
      child: Text(
        widget.data.title,
        style: TextStyle(
          fontSize: 18,
          color: Colors.white,
          fontWeight: FontWeight.bold,
        ),
      ),
    );
  }

  /// 设置背景色
  Decoration _decoration() {
    return widget.data.cover.blurred != null && widget.data.cover.blurred != ""
        ? BoxDecoration(
            image: DecorationImage(
              //背景图片
              fit: BoxFit.cover,
              // http://img.kaiyanapp.com/2129708dda66e25ae11490a2402603d5.jpeg?imageMogr2/quality/60/format/jpg}/thumbnail/300x600
              image: cachedNetworkImageProvider(
                  '${widget.data.cover.blurred}/thumbnail/${MediaQuery.of(context).size.height}x${MediaQuery.of(context).size.width}'),
            ),
          )
        : BoxDecoration(color: Colors.black.withAlpha(100));
  }
}
